<template>
  <el-drawer v-bind="$attrs" ref="tableFormRef" @open="openDrawer" @close="closeDrawer" destroy-on-close :close-on-click-modal="false">
    <template #header>
      <h3>一键新增</h3>
    </template>
    <template #default>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120" label-position="left">
        <el-form-item prop="parent" label="父级标识">
          <el-input v-model="formData.parent" placeholder="请输入父级标识" clearable />
        </el-form-item>
        <el-form-item prop="label" label="父级名称">
          <el-input v-model="formData.label" placeholder="请输入父级名称" clearable />
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input-number v-model="formData.sort" :min="0" :step="10" step-strictly />
        </el-form-item>
        <el-form-item prop="create" label="新增">
          <el-input v-model="formData.create" placeholder="请输入新增权限标识（空缺即为不要）" clearable />
        </el-form-item>
        <el-form-item prop="find" label="查询">
          <el-input v-model="formData.find" placeholder="请输入查询权限标识（空缺即为不要）" clearable />
        </el-form-item>
        <el-form-item prop="update" label="修改">
          <el-input v-model="formData.update" placeholder="请输入修改权限标识（空缺即为不要）" clearable />
        </el-form-item>
        <el-form-item prop="remove" label="删除">
          <el-input v-model="formData.remove" placeholder="请输入删除权限标识（空缺即为不要）" clearable />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import { permissionCreateBatch } from '@/api/system/permission'
import { ElNotification } from 'element-plus'
import { ref } from 'vue'

const props = defineProps({})

const emits = defineEmits(['submit'])

// 表单数据
const formData = ref({
  parent: '',
  label: '',
  sort: 0,
  create: 'create',
  find: 'find',
  update: 'update',
  remove: 'remove'
})

// 校验规则
const rules = ref({
  parent: [{ required: true, message: '请输入父级标识', trigger: 'blur' }],
  label: [{ required: true, message: '请输入父级名称', trigger: 'blur' }]
})

const tableFormRef = ref() // 抽屉
const formRef = ref() // 表单

// 抽屉打开回调
function openDrawer() {}

// 抽屉关闭回调
function closeDrawer() {}

// 关闭抽屉
function cancel() {
  tableFormRef.value.handleClose()
}
// 确认提交表单
function confirm() {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      const { parent, label, sort, create, find, update, remove } = formData.value

      // 构建批量数据
      let list = [
        create && { name: `${parent}:${create}`, label: `${label}新增`, parent, description: '', remark: '', sort: sort + 1, status: 1 },
        find && { name: `${parent}:${find}`, label: `${label}查询`, parent, description: '', remark: '', sort: sort + 2, status: 1 },
        update && { name: `${parent}:${update}`, label: `${label}修改`, parent, description: '', remark: '', sort: sort + 3, status: 1 },
        remove && { name: `${parent}:${remove}`, label: `${label}删除`, parent, description: '', remark: '', sort: sort + 4, status: 1 }
      ]

      // 筛选出有效数据
      list = list.filter((item) => item)

      // 批量增量添加
      const res = await permissionCreateBatch({
        list,
        cover: false // 是否覆盖
      })

      if (res.success) {
        ElNotification({
          type: 'success',
          title: 'Success',
          message: res?.msg
        })
      }

      tableFormRef.value.handleClose()
      formRef.value.resetFields() // 重置表单

      emits('submit')
    } else {
      console.log('==== 校验失败 :', fields)
    }
  })
}
</script>

<style lang="scss"></style>
